<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新派八字</title>
    <link rel="stylesheet" type="text/css" href="./css/baZi.css">
    <link>

</head>

<body>
    <main>
        <div class="dateAndSex">
            <!-- <input type="date"> -->
            <select name="sexSelect" id="sexSelect">
                <option value="null">选择性别</option>
                <option value="man">男</option>
                <option value="woman">女</option>
            </select>
        </div>

        <table>
            <thead>
                <td>年柱</td>
                <td>月柱</td>
                <td>日柱</td>
                <td>时柱</td>
            </thead>
            <tr>
                <td id="tenGodYear"> </td>
                <td id="tenGodMonth"> </td>
                <td id = "sex">性别</td>
                <td id="tenGodHour"> </td>
            </tr>
            <tr>
                <td><span class="zhiGan" id="1">甲</span><span class="isStrong"><!-- 旺弱 --></span></td>
                <td><span class="zhiGan" id="2">乙</span><span class="isStrong"><!-- 旺弱 --></span></td>
                <td><span class="zhiGan" id="3">丙</span><span class="isStrong"><!-- 旺弱 --></span></td>
                <td><span class="zhiGan" id="4">丁</span><span class="isStrong"><!-- 旺弱 --></span></td>
                <td id="pattern">格局</td>
            </tr>
            <tr>
                <td><span class="zhiGan" id="5">子</span><span class="isStrong"><!-- 旺弱 --></span></td>
                <td><span class="zhiGan" id="6">亥</span><span class="isStrong"><!-- 旺弱 --></span></td>
                <td><span class="zhiGan" id="7">辰</span><span class="isStrong"><!-- 旺弱 --></span></td>
                <td><span class="zhiGan" id="8">子</span><span class="isStrong"><!-- 旺弱 --></span></td>
                <td>(<span id="kongWang">空亡</span>)</td>
            </tr>

            <!-- js生成 -->
        </table>
        <div class="buttonBox">
            <button onclick="caleBaZi()" class="caleButton">开始计算</button>
            <button onclick="caleBaZi()" class="caleButton">开始计算</button>
        </div>


        <div class="chooseDiv" id="chooseTian" style="display:none">
            <span class="zhiGan" id="11">甲</span>
            <span class="zhiGan" id="12">乙</span>
            <span class="zhiGan" id="13">丙</span>
            <span class="zhiGan" id="14">丁</span>
            <span class="zhiGan" id="15">戊</span>
            <br>
            <span class="zhiGan" id="16">己</span>
            <span class="zhiGan" id="17">庚</span>
            <span class="zhiGan" id="18">辛</span>
            <span class="zhiGan" id="19">壬</span>
            <span class="zhiGan" id="20">癸</span>
        </div>
        <div class="chooseDiv" id="chooseDiZhiYang" style="display:none">
            <span class="zhiGan" id="21">子</span>
            <span class="zhiGan" id="23">寅</span>
            <span class="zhiGan" id="25">辰</span>
            <span class="zhiGan" id="27">午</span>
            <span class="zhiGan" id="29">申</span>
            <span class="zhiGan" id="31">戌</span>
        </div>
        <div class="chooseDiv" id="chooseDiZhiYin" style="display:none">
            <span class="zhiGan" id="22">丑</span>
            <span class="zhiGan" id="24">卯</span>
            <span class="zhiGan" id="26">巳</span>
            <span class="zhiGan" id="28">未</span>
            <span class="zhiGan" id="30">酉</span>
            <span class="zhiGan" id="32">亥</span>
        </div>
        
    </main>
</body>

</html>
<script src="./js/baZi.js"></script>